<template>
    <vxe-modal :title='title'  show-footer :loading="confirmLoading" destroyOnClose width='62%' v-model='visible' @close='handleCancel'>
        <h-form :config='formConfig' ref='formRef' :options='formOptions' v-model='model' @change='formChange' />
        <div slot='footer' style='text-align: center'>
            <a-space>
                <a-button type='danger' @click='handleCancel'> 关闭</a-button>
                <a-button :loading='confirmLoading' type='primary'
                        @click='handleSubmit'> 保存
                </a-button>
            </a-space>
        </div>
    </vxe-modal>
</template>

<script>
    import { getSetFilesByForm, getSelectOptions,getSetMultipleSelectIdByForm } from '@/utils/formUtil';
    import { busiFieldFormSelectConfig } from "./data"
    <#assign selectUser = false>
    <#assign selectDept = false>
    <#list fieldData as item>
    <#assign fieldShowType = item.fieldShowType>
    <#if fieldShowType == "13">
    <#assign selectUser = true>
    </#if>
    <#if fieldShowType == "14">
    <#assign selectDept = true>
    </#if>
    </#list>
    <#if selectUser == true || selectDept == true>
    import Vue from 'vue'
    </#if>
    <#if selectUser == true>
    import SysUserSelect from '@/views/components/SysUserSelect.vue';
    Vue.component('SysUserSelect', SysUserSelect);
    </#if>
    <#if selectDept == true>
    import HDepartSelect from '@/views/components/HDepartSelect.vue';
    Vue.component('HDepartSelect', HDepartSelect);
    </#if>
    const baseUrlPrefix = process.env.VUE_APP_API_BASE_URL_PREFIX;

    export default {
        name: '${webPrefix}Modal',
        data() {
            return {
                formConfig: {
                    columns: 2
                },
                confirmLoading: false,
                visible: false,
                model: {},
                title: '',
                handleType: '',
                formOptions: [
                    { type: "a-input", key: 'id', hidden: true },
                    <#list fieldData as item>
                    <#assign fieldName = item.dbFieldName>
                    <#assign fieldShowName = item.fieldShowName>
                    <#assign isShowList = item.isShowList>
                    <#assign isShowForm = item.isShowForm>
                    <#assign fieldShowType = item.fieldShowType>
                    <#assign fieldMustInput = item.fieldMustInput>
                    <#assign dictOriginType = item.dictOriginType>
                    <#assign dictKey = item.dictKey>
                    <#assign dictCode = item.dictField>
                    <#if isShowForm == true &&  fieldShowType?has_content>
                    <#switch fieldShowType>
                    <#--            // 文本框-->
                    <#case "1">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: "a-input",
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请输入${fieldShowName}' }],
                        </#if>
                        options: {
                            props: {
                                placeholder: '请输入${fieldShowName}',
                            }
                        },
                    },
                    <#break>
                    <#-- 单选框-->
                        <#case "2">
                        <#if dictOriginType == "1">
                            {
                                title: '${fieldShowName}',
                                key: '${fieldName}',
                                type: 'h-dict-radio',
                                <#if fieldMustInput == true>
                                rules: [{ required: true, message: '请选择${fieldShowName}' }],
                                </#if>
                                options: {
                                    props: {
                                        dictCode: "${dictCode}",
                                    },
                                },
                            },
                        </#if>
                        <#if dictOriginType == "2">
                            {
                                title: '${fieldShowName}',
                                key: '${fieldName}',
                                type: 'h-radio',
                                <#if fieldMustInput == true>
                                rules: [{ required: true, message: '请选择${fieldShowName}' }],
                                </#if>
                                options: {
                                    props:{
                                        options: [],
                                    },
                                },
                            },
                            </#if>
                            <#break>
                    <#--                // 多选框-->
                    <#-- // 多选框-->
                    <#case "3">
                        <#if dictOriginType == "1">
                            {
                                title: '${fieldShowName}',
                                key: '${fieldName}',
                                type: 'h-dict-checkbox',
                                <#if fieldMustInput == true>
                                rules: [{ required: true, message: '请选择${fieldShowName}' }],
                                </#if>
                                options: {
                                    props: {
                                        dictCode: "${dictCode}",
                                        options: [],
                                    },
                                },
                            },
                        </#if>
                        <#if dictOriginType == "2">
                            {
                                title: '${fieldShowName}',
                                key: '${fieldName}',
                                type: 'h-checkbox',
                                <#if fieldMustInput == true>
                                    rules: [{ required: true, message: '请选择${fieldShowName}' }],
                                </#if>
                                options: {
                                    props: {
                                        options: [],
                                    }
                                },
                            },
                        </#if>
                    <#break>
                    <#--                // 日期(yyyy-MM-dd)-->
                    <#case "5">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: 'h-date-picker',
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请选择${fieldShowName}' }],
                        </#if>
                        options: {
                            props: {
                                format:"YYYY-MM-DD",
                                valueFormat:"YYYY-MM-DD",
                                placeholder: "请选择${fieldShowName}",
                            }
                        },
                    },
                    <#break>
                    <#--                // 日期(yyyy)-->
                    <#case "6">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: 'h-year-picker',
                        <#if fieldMustInput == true>
                            rules: [{ required: true, message: '请选择${fieldShowName}' }],
                        </#if>
                        options: {
                            props:{
                                placeholder: "请选择${fieldShowName}",
                            }
                        },
                    },
                    <#break>
                    <#--                // 日期(yyyy-MM-dd HH:mm:ss)-->
                    <#case "7">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: 'h-date-picker',
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请选择${fieldShowName}' }],
                        </#if>
                        options: {
                            props: {
                                showTime: true,
                                format:"YYYY-MM-DD HH:mm:ss",
                                valueFormat:"YYYY-MM-DD HH:mm:ss",
                                placeholder: "请选择${fieldShowName}",
                            }
                        },
                    },
                    <#break>
                    <#--                // 多行文本-->
                    <#case "8">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: 'a-textarea',
                        span: 2,
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请输入${fieldShowName}' }],
                        </#if>
                        options: {
                            props: {
                                placeholder: '请输入${fieldShowName}',
                            }
                        },
                    },
                    <#break>
                    <#--                // 文件-->
                    <#case "9">
                    {
                        title: '${fieldShowName}',
                        key: '${fieldName}',
                        type: 'h-upload-file',
                        span: 2,
                        <#if fieldMustInput == true>
                        rules: [{ required: true, message: '请上传${fieldShowName}' }],
                        </#if>
                        options: {
                            props: {
                                showSecretLevel: true,
                            },
                            scopedSlots: {
                                secretLevel: ({row, $upload}) => this.$createElement("h-dict-select-user", {
                                    props: {
                                        value: row.secretLevel,
                                    },
                                    on: {
                                        change: (value) => {
                                            row.secretLevel = value;
                                            $upload.triggerChange();
                                        },
                                    },
                                }),
                            },
                        },
                    },
                    <#break>
                    <#--                // 下拉框-->
                        <#case "10">
                        <#if dictOriginType == "1">
                            {
                                title: '${fieldShowName}',
                                key: '${fieldName}',
                                type: 'h-dict-select',
                                <#if fieldMustInput == true>
                                    rules: [{ required: true, message: '请选择${fieldShowName}' }],
                                </#if>
                                options: {
                                    props: {
                                        dictCode: "${dictCode}",
                                        options: [],
                                    }
                                },
                            },
                        </#if>
                        <#if dictOriginType == "2">
                            {
                                title: '${fieldShowName}',
                                key: '${fieldName}',
                                type: 'h-select',
                                <#if fieldMustInput == true>
                                    rules: [{ required: true, message: '请选择${fieldShowName}' }],
                                </#if>
                                options: {
                                    props: {
                                        options: [],
                                    }
                                },
                            },
                        </#if>
                            <#break>
                        <#--                // 下拉多选-->
                        <#case "11">
                        <#if dictOriginType == "1">
                            {
                                title: '${fieldShowName}',
                                key: '${fieldName}',
                                type: 'h-dict-select',
                                <#if fieldMustInput == true>
                                    rules: [{ required: true, message: '请选择${fieldShowName}' }],
                                </#if>
                                options: {
                                    props: {
                                        mode: "multiple",
                                        dictCode: "${dictCode}",
                                        options: [],
                                    }
                                },
                            },
                        </#if>
                        <#if dictOriginType == "2">
                            {
                                title: '${fieldShowName}',
                                key: '${fieldName}',
                                type: 'h-select',
                                <#if fieldMustInput == true>
                                    rules: [{ required: true, message: '请选择${fieldShowName}' }],
                                </#if>
                                options: {
                                    props: {
                                        mode: "multiple",
                                        options: [],
                                    }
                                },
                            },
                        </#if>
                            <#break>
                        <#--                // 数值-->
                        <#case "12">
                            {
                                title: '${fieldShowName}',
                                key: '${fieldName}',
                                type: 'a-input-number',
                                <#if fieldMustInput == true>
                                    rules: [{ required: true, message: '请输入${fieldShowName}' }],
                                </#if>
                                options: {
                                    props: {
                                        placeholder: '请输入${fieldShowName}',
                                    },
                                    style:{
                                        width: "100%"
                                    }
                                },
                            },
                            <#break>
                        <#--                // 人员选择-->
                        <#case "13">
                            {
                                title: '${fieldShowName}',
                                key: '${fieldName}',
                                type: 'sysUserSelect',
                                <#if fieldMustInput == true>
                                    rules: [{ required: true, message: '请选择${fieldShowName}' }],
                                </#if>
                                options: {
                                    props: {
                                        placeholder: `请选择${fieldShowName}`,
                                    }
                                }   
                            },
                            <#break>
                        <#--                // 部门选择-->
                        <#case "14">
                            {
                                title: '${fieldShowName}',
                                key: '${fieldName}',
                                type: 'HDepartSelect',
                                <#if fieldMustInput == true>
                                    rules: [{ required: true, message: '请选择${fieldShowName}' }],
                                </#if>
                                options: {
                                    props: {
                                        placeholder: `请选择${fieldShowName}`,
                                    }
                                },
                            },
                            <#break>
                             <#--                // 人员密级选择-->
                        <#case "15">
                            {
                                title: '${fieldShowName}',
                                key: '${fieldName}',
                                type: 'h-dict-select-user',
                                <#if fieldMustInput == true>
                                    rules: [{ required: true, message: '请选择${fieldShowName}' }],
                                </#if>
                                options: {
                                    props: {
                                        placeholder: `请选择${fieldShowName}`,
                                    }
                                },
                            },
                            <#break>
                    </#switch>
                    </#if>
                    </#list>
                ],
                url: {
                    queryById: baseUrlPrefix + '/${tableName}Controller/queryById',
                    add: baseUrlPrefix + '/${tableName}Controller/add',
                    edit: baseUrlPrefix + '/${tableName}Controller/edit'
                }
            };
        },

        created(){
            getSelectOptions(busiFieldFormSelectConfig, this.formOptions)
        },
        methods: {
            show(record, type = 'edit') {
                this.handleType = type;
                this.model = {};
                this.visible = true;
                this.title = type === 'edit' ? '编辑' : '新增';
                if (['edit'].includes(type)) {
                    this.$GET(this.url.queryById, { id: record.id }).then((res) => {
                        const { code, data } = res;
                        if (code === 200) {
                            this.model = {
                                ...data,
                                ...getSetFilesByForm(this.formOptions, data, 'set'),
                                ...getSetMultipleSelectIdByForm(this.formOptions, data, 'set')
                            };
                        }
                    });
                }
            },
            handleSubmit() {
                this.$refs.formRef.getData();
            },
            formChange(values) {
                if (this.confirmLoading) return;
                this.confirmLoading = true;
                const params = {
                    ...values,
                    ...this.model,
                    ...getSetFilesByForm(this.formOptions, values),
                    ...getSetMultipleSelectIdByForm(this.formOptions, values)
                };
                const url = this.url[this.handleType]
                this.$POST(url, params).then((res) => {
                    const { code = 0 } = res;
                    if (code === 200) {
                        this.$message.success(this.title + '成功');
                        this.handleCancel();
                        this.$emit('change');
                    }
                }).finally(() => {
                    this.confirmLoading = false;
                });
            },
            handleCancel() {
                this.visible = false;
            }
        }
    };
</script>

<style scoped lang='less'>

</style>